import React, { FC } from 'react'
import styled from "styled-components"
import Up from '@/assert/images/button/up-g.png'
import Down from '@/assert/images/button/down-b.png'
interface IRate {
    upDownStatus: boolean,
    saleRate: string,
    comparisonText?: string,
}

const Rate = styled.div`
        flex: 1;
        display:flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        justify-content: center;
        .text{
          display: block;
          width: 100%;
          font-size: 1.6rem;
          color:#00C6FF
        }
        .text-rate{
          margin: 1rem;
          display: block;
          width: 100%;
          font-size: 2rem;
          color:'#76FF5C';
        }

        .date-state{
          display: inline-block;
          width: 1.4rem;
          height: 1.9rem;
          margin-right:0.5rem
        }
`

const Content: FC<IRate> = function (props) {

    return (
        <Rate>   <p className='text'>{props.comparisonText}</p>
            <p className='text-rate' style={{ color: props.upDownStatus ? '#76FF5C' : '#ff697a' }}>
                <img className='date-state' src={props.upDownStatus ? Up : Down} />
                {props.saleRate}</p></Rate>
    )
}

export default Content
